<template>
  <div class="app-container">
    <el-date-picker
      v-model="value"
      align="right"
      type="date"
      default-value
      value-format="yyyy-MM-dd"
      @input="handle"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>


    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      添加时间片
    </el-button>
    <el-button type="primary" @click="dialogFormVisible1 = true">上传EXCEL导入<i class="el-icon-upload el-icon--right"></i></el-button>

    <el-dialog title="导入EXCEL" :visible.sync="dialogFormVisible1">
      <el-upload
        class="upload-demo"
        :action="'http://101.33.210.8:8005/main/room-time-slice/addByFile?roomId='+this.$route.params.id"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="handSuccess"
        :on-error="handError"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
      </el-upload>

    </el-dialog>

    <el-drawer
      title="添加时间片"
      :visible.sync="drawer"
      ref="drawer1"
      >

      <el-form ref="form" :model="time_slice" label-width="80px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="time_slice.sliceDate"
            align="right"
            type="date"
            default-value
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="会议时间">
          <el-time-picker
            format="HH:mm"
            value-format="HH:mm"
            v-model="time_slice.beginTime"
            placeholder="开始时间">
          </el-time-picker>
          <el-time-picker
            arrow-control
            format="HH:mm"
            value-format="HH:mm"
            v-model="time_slice.endTime"
            placeholder="结束时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button  @click="drawer = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>


    <el-drawer
      title="添加时间片"
      :visible.sync="drawer1"
      ref="drawer1"
    >

      <el-form ref="form" :model="time_slice" label-width="80px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="time_slice.sliceDate"
            align="right"
            type="date"
            default-value
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="会议时间">
          <el-time-picker
            format="HH:mm"
            value-format="HH:mm"
            v-model="time_slice.beginTime"
            placeholder="开始时间">
          </el-time-picker>
          <el-time-picker
            arrow-control
            format="HH:mm"
            value-format="HH:mm"
            v-model="time_slice.endTime"
            placeholder="结束时间">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch
            v-model="time_slice.state"
            active-text="未预约"
            inactive-text="已预约"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>

        <el-form-item label="预约人">
          <el-input v-model="time_slice.userId" placeholder=" 示例：张三"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button  @click="drawer1 = false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      >
      <el-table-column type="date" prop="cover" label="日期" sortable >
        <template   slot-scope="scope" >
          {{scope.row.sliceDate.substring(0,10)}}
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="开始时间" />

      <el-table-column prop="endTime" label="结束时间"/>

      <el-table-column prop="userName" label="预约人"/>


      <el-table-column type="status" prop="cover" label="状态" sortable >
        <template   slot-scope="scope" >
          <el-tag type="success" v-if="scope.row.state==1">未预约</el-tag>
          <el-tag type="info" v-else>已预约</el-tag>
        </template>
      </el-table-column>


            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="getById(scope.row.id)">修改</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteById(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
    </el-table>
  </div>
</template>
<script>
import time_slice from "../../api/time_slice"
import room from "../../api/room";

export default {
  data() {
    return {
      list: null,//查询后的接口集合
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value: '',
      drawer: false,
      drawer1:false,
      time_slice:{
        id:'',
        sliceDate:'',
        roomId:'',
        userId:'',
        state:'',
        beginTime:'',
        endTime:'',
        isDeleted:'',
        gmtCreate:'',
        gmtModified:'',
      },
      fileList: [],
      dialogFormVisible1:false,
    }
  },
  created() {
    this.listAll()
    this.time_slice.roomId = this.$route.params.id
  },
  methods: {

    listAll() {
      time_slice.getByRoomID(this.$route.params.id)
        .then(response => {
          this.list = response.data.list
        })
    },
    handle(e) {
      if(this.value==null){
        this.listAll()
      }else {
        time_slice.getByDate(this.$route.params.id,this.value)
          .then(response => {
            this.list = response.data.list
          })
      }
    },
    onSubmit(){
      time_slice.add(this.time_slice)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.listAll()
          this.drawer = false
        })
    },
    deleteById(id){
      time_slice.deleteById(id)
        .then(response=>{
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.listAll()
        })
    },
    save() {
      time_slice.update(this.time_slice)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
         this.drawer1 = false
          this.listAll()
        })
    },
    getById(id) {
      time_slice.getById(id)
        .then(response=>{
          this.time_slice = response.data.slice
          this.drawer1 = true
        })
    },
    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handSuccess(response) {
      this.dialogFormVisible = false
      this.$notify({
        title: '成功',
        message: '导入成功',
        type: 'success'
      });
      this.dialogFormVisible1 = false;
      this.listAll()
    },
    handError(){
      this.dialogFormVisible = false
      this.$notify.error({
        title: '错误',
        message: '导入失败'
      });
    },
  }
}
</script>
<style>
</style>
